<template>
  <div class="contents">
    <PanelTitle title="商品概览" />
    <div class="mt">
      <div class="infoPanel">
        <div>
          <!-- <div class="infoTitle">市场价格</div> -->
          <div class="infoNums">
            <span class="infoNum">{{ categoryList.length }}</span>
            <span class="infoUnit">种商品</span>
          </div>

        </div>
        <div>
          <!-- <div class="infoTitle">兜底价格</div> -->
          <div class="infoNums">
            <span class="infoNum">{{ goodsCount }}</span>
            <span class="infoUnit">个商品</span>
          </div>

        </div>
      </div>
      <div ref="maps" class="maps"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import { fitChartSize } from "@/utils/dataUtil.js";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import loopScroll from "@/components/loopScroll.vue";
import { countGoods, countOrderCategory } from "@/api/orderApi";
import { getCategoryList } from "@/api/categoryApi";
const maps = ref(null);
const categoryList = ref<any[]>([])
const goodsCount = ref(0)

const getPieData = async () => {
  
  let res = await countOrderCategory({})
  let nameList = res.data.map(item => item.categoryName)
  let moneyList = res.data.map(item => item.money / 1000000)
  let pieData = res.data.map(item => {
    return {
      name: item.categoryName,
      value: item.money / 1000000
    }
  })

  // let pieData = [
  //   {
  //     value: 144,
  //     name: "钢筋",
  //     itemStyle: {
  //       color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  //         { offset: 0, color: "rgba(26, 119, 254, 1)" },
  //         { offset: 1, color: "rgba(93, 202, 248, 1)" },
  //       ]),
  //     },
  //   },
  //   {
  //     value: 120,
  //     name: "玻璃",
  //     itemStyle: {
  //       color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  //         { offset: 0, color: "rgba(254, 117, 169, 1)" },
  //         { offset: 1, color: "rgba(237, 102, 102, 1)" },
  //       ]),
  //     },
  //   },
  //   {
  //     value: 103,
  //     name: "不锈钢管",
  //     itemStyle: {
  //       color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  //         { offset: 0, color: "rgba(8, 194, 174, 1)" },
  //         { offset: 1, color: "rgba(1, 208, 161, 1)" },
  //       ]),
  //     },
  //   },
  //   {
  //     value: 94,
  //     name: "混泥土",
  //     itemStyle: {
  //       color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  //         { offset: 0, color: "rgba(252, 198, 64, 1)" },
  //         { offset: 1, color: "rgba(248, 228, 143, 1)" },
  //       ]),
  //     },
  //   },
  //   {
  //     value: 74,
  //     name: "砖头",
  //     itemStyle: {
  //       color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  //         { offset: 0, color: "rgba(180, 117, 254, 1)" },
  //         { offset: 1, color: "rgba(212, 168, 252, 1)" },
  //       ]),
  //     },
  //   },
  //   {
  //     value: 44,
  //     name: "其他",
  //     itemStyle: {
  //       color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
  //         { offset: 0, color: "rgba(100, 117, 254, 1)" },
  //         { offset: 1, color: "rgba(112, 168, 252, 1)" },
  //       ]),
  //     },
  //   },
  // ];


  
  var rightmaps = echarts.init(maps.value);
  rightmaps.setOption({
    tooltip: {
      show: true,
      trigger: "item",
    },
    legend: {
     
      icon: "circle",
      itemHeight: fitChartSize(7),
      itemWidth: fitChartSize(7),
      top: "bottom",
      left: "center",
      data: nameList,
      textStyle: {
        fontSize: fitChartSize(9),
        color: "#fff",
      },
    },
    // color: ["#D4A8FC", "#00FCFF", "#1DC0DE", "#08EE8A", "#2871B5"],
    series: [
      {
        name: "外边框",
        type: "pie",
        clockWise: false,
        radius: [fitChartSize(30), fitChartSize(55)], //边框大小
        center: ["50%", "45%"], //边框位置
        silent: true,
        itemStyle: {
          normal: {
            color: "rgba(44, 215, 255, .2)",
          },
        },
        labelLine: {
          normal: {
            length: fitChartSize(45),
            length2: fitChartSize(45),
            show: false, // 隐藏所有指示线
          },
        },
        data: [
          {
            value: 0,
          },
        ],
      },
      {
        type: "pie",
        radius: [fitChartSize(35), fitChartSize(50)],
        center: ["50%", "45%"],
        itemStyle: {
          // borderRadius: 5,
        },
        labelLine: {
          // length: fitChartSize(20),
          // length2: fitChartSize(30),
          lineStyle: {
            color: "#2CD7FF",
          },
        },
       
        label: {
          formatter: '{b}:{c}万 ({d}%)',
          show: true,
          color: "#2cd7bc",
        },
        data: pieData,
      },
    ],
  });
}

const getCategory = async () => {
  let res = await getCategoryList({pageNum: 1, pageSize: 1000})
  categoryList.value = res.data.records
}
const getGoods = async () => {
  let res = await countGoods({})
  goodsCount.value = res.data
}

onMounted(async () => {
  getPieData()
  getCategory()
  getGoods()

})
</script>


<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

}

.mt {
  margin-top: vh(-40);
  color: #2cd7bc;
  font-size: vh(12);
  line-height: vh(20);
  padding: vh(10);
}

.maps {
  height: 25vh;
  width: 100%;
}

.infoPanel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 vw(15) 0;

  >div {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: vw(140);
    height: vh(60);
    background: rgba(9, 36, 44, 0.4);
    border: vh(1) solid #43e7ff;
    padding: 0 vw(20) 0px;
    margin: vh(6) 0;
  }

  .infoTitle {
    color: #fff;
    font-size: vh(10);
    line-height: vh(30);
  }

  .infoNums {
    line-height: vh(20);
  }

  .infoNumss {
    line-height: vh(36);
  }

  .infoNum {
    color: #adffd7;
    font-size: vh(24);
    font: SourceHanSansCN-Bold;
  }

  .infoUnit {
    color: #adffd7;
    font-size: vh(16);
    font: SourceHanSansCN-Bold;
    margin-left: vw(4);
  }

  .infoSub {
    font-weight: 400;
    font-size: vh(10);
    color: #adffd7;
    line-height: vh(20);
  }
}

.img-item {
  width: 10vw;
  display: block;
  margin: 0 auto;
}

.conent {
  padding: 1vh 0 0 0;
  text-indent: 30px;
}


.loop-scroll {
  height: 22vh;
  width: vw(344);
  margin: 0 auto;
}

table {
  width: vw(344);
  margin: 0 auto;
}

th {
  color: #fff;
  background: rgba(50, 200, 167, 0.45);
  min-width: vw(60);
  line-height: vh(20);
  padding: vh(9) vw(9);
}

table,
th,
td {
  color: #2cd7bc;
  line-height: vh(14);
  padding: vh(9) vw(9);

  border: vh(1) solid #2cd7bc;
  border-collapse: collapse;

  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: vh(12);
  text-align: center;
}
</style>